<script setup>
import { ref } from 'vue';

const popup = ref(null);
const title = ref('');
const message = ref('');
const icon = ref('');
const iconColor = ref('#666');

function show(options) {
  title.value = options.title;
  message.value = options.message || '';
  icon.value = getIconType(options.type);
  iconColor.value = getIconColor(options.type);

  popup.value.open();

  if (options.duration !== 0) {
    setTimeout(() => {
      popup.value.close();
    }, options.duration || 1500);
  }
}

function hide() {
  popup.value.close();
}

function getIconType(type) {
  const types = {
    success: 'checkmarkempty',
    error: 'closeempty',
    warning: 'alert',
    loading: 'spinner-cycle',
  };
  return types[type] || '';
}

function getIconColor(type) {
  const colors = {
    success: '#22c55e',
    error: '#ef4444',
    warning: '#f97316',
    loading: '#3b82f6',
  };
  return colors[type] || '#666';
}

defineExpose({ show, hide });
</script>

<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <div class="bg-white rounded-lg shadow-md p-5 min-w-[200px] max-w-[80%] text-center">
      <div v-if="icon" class="mb-2 flex justify-center">
        <uni-icons
          :type="icon"
          size="24"
          :color="iconColor"
          :class="{ 'animate-spin': icon === 'spinner-cycle' }"
        />
      </div>
      <p class="text-gray-800 font-medium">
        {{ title }}
      </p>
      <p v-if="message" class="text-gray-500 text-sm mt-1">
        {{ message }}
      </p>
    </div>
  </uni-popup>
</template>
